<template>
  <div class="random-shoot" v-if="form_cluster && form_cluster.length !== 0">
    <c-title text="查看详情"></c-title>
    <div class="head">
      <p class="left" style="font-weight: bold;font-size: 1rem;">ID:{{ ID }}</p>
      <div class="line"></div>
      <p class="left fz-28">{{ text }}</p>
      <p class="left fz-28" style="margin: 0.8125rem 0;"><span>填写时间：</span><span style="color:#6E6E79;">{{ submit_datetime
      }}</span></p>
      <p class="left fz-28"><span>会员昵称：</span><span style="color:#6E6E79;">{{ nickname }}</span></p>
    </div>

    <div class="between">
      <span><i class="iconfont icon-wode-wode" style="color: #3189E3;margin-right: .5rem;"></i>{{ form_cluster[0].title
      }}</span><span>{{ form_cluster[0].name }}</span>
    </div>
    <div class="between">
      <span class="required"><i class="iconfont icon-zx_map_tel" style="color: #3189E3;margin-right: .5rem;"></i>{{
        form_cluster[1].title }}</span><span>{{ form_cluster[1].mobile }}</span>
    </div>
    <van-cell title-style="text-align:left;" is-link :value="form_cluster[2].area">
      <template #title>
        <i class="iconfont icon-zx_map_locate1" style="color: #3189E3;margin-right: .5rem;"></i>
        <span>{{ form_cluster[2].title }}</span>
      </template>
    </van-cell>
    <van-cell title-style="text-align:left;" is-link :value="form_cluster[3].coordinate.address">
      <template #title>
        <i class="iconfont icon-zx_map_local" style="color: #3189E3;margin-right: .5rem;"></i>
        <span>{{ form_cluster[3].title }}</span>
      </template>
    </van-cell>
    <van-cell title-style="text-align:left;" :value="form_cluster[4].date" is-link >
      <template #title>
        <i class="iconfont icon-lishi" style="color: #3189E3;margin-right: .5rem;"></i>
        <span>{{ form_cluster[4].title }}</span>
      </template>
      </van-cell>
    <div class="textarea">
      <p  style="text-align: left;"><i class="iconfont icon-qhm_service" style="color: #3189E3;margin-right: .5rem;"></i>
        <span class="required-rows">{{ form_cluster[5].title }}</span></p>
      <div class="box">
        <van-field v-model="form_cluster[5].rows" rows="2" readonly autosize type="textarea" maxlength="50"
          placeholder="请输入留言" show-word-limit />
      </div>
    </div>
    <div class="photo">
      <p style="text-align: left;"> <i class="iconfont icon-jk_haibao" style="color: #3189E3;margin-right: .5rem;"></i>{{ form_cluster[6].title }}</p>
      <div class="photo-img" v-if="form_cluster[6].images && form_cluster[6].images.length !== 0">
        <img v-for="item in form_cluster[6].images" :src="item" style="width:6.5625rem;height: 6.5625rem;">
      </div>
    </div>
    <div class="photo">
      <p style="text-align: left;"><i class="iconfont icon-fontclass-ship" style="color: #3189E3;margin-right: .5rem;"></i>{{ form_cluster[7].title }}</p>
      <div class="video-list">
        <template v-if="form_cluster[7].videos && form_cluster[7].videos.length !== 0">
          <template v-for="item in form_cluster[7].videos">
            <div class="box-video">
              <video controls ref="video" preload="metadata" controlslist="nodownload" webkit-playsinline="true"
                x5-video-player-type="h5" playsinline x5-playsinline="" x5-video-orientation="portrait"
                x5-video-player-fullscreen="" autoplay="autoplay"
                style="margin-right:0.9375rem;width: 6.5625rem;height: 6.5625rem" :src="item">
                <source :src="item" type="video/ogg" />
                <source :src="item" type="video/mp4" />
                你的浏览器不支持video标签！
              </video>
            </div>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form_id: "",
      form_cluster: [],
      ID: "",
      text: "",
      nickname: "",
      submit_datetime: "",
    }
  },
  activated() {
    this.form_id = this.$route.params.form_id
    this.getData()
  },
  methods: {
    getData() {
      $http.get("plugin.shoot-casually.frontend.form-member.show", { id: this.form_id }, "").then(({ result, msg, data }) => {
        console.log(data);
        if (result) {
          this.ID = data.id;
          this.nickname = data.member_nickname;
          this.submit_datetime = data.submit_datetime;
          let title = data.form_title;
          this.text = title;
          // this.fun.setWXTitle(title);
          this.form_cluster = data.form_data;
        } else {
          this.$toast(msg);
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .detail img {
  width: 100% !important;
  height: 100%;
}

::v-deep .van-cell__value {
  color: #282828;
}

::v-deep .van-field {
  white-space: nowrap;
}


.random-shoot {
  .required {
    position: relative;

    &::after {
      content: "*";
      position: absolute;
      right: -10px;
      top: 0;
      color: red;
    }
  }

  .required-rows {
    position: relative;

    &::after {
      content: "*";
      position: absolute;
      right: -0.5rem;
      top: 0;
      color: red;
    }
  }

  .between {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 10px 16px;

    &::after {
      position: absolute;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 16px;
      bottom: 0;
      left: 16px;
      border-bottom: 1px solid #ebedf0;
      -webkit-transform: scaleY(.5);
      transform: scaleY(.5);
    }
  }

  .field-left {
    color: #000;
  }

  .fz-28 {
    font-size: 0.875rem;
  }

  .head {
    background: #FFFFFF;
    border-radius: 0.5rem;
    padding: 0.9688rem 0.75rem 1.125rem;
    margin: 0.625rem 0.75rem;
  }

  .line {
    height: 1px;
    background: #F0F0F1;
    margin: 1.0313rem 0;
  }

  .left {
    text-align: left;
  }

  .textarea,
  .photo {
    background: #fff;
    padding: 10px 16px;
  }

  .box-video {
    position: relative;
  }

  .close {
    position: absolute;
    top: 0;
    right: 0.9375rem;
    width: 14px;
    height: 14px;
    background-color: rgba(0, 0, 0, .7);
    border-radius: 0 0 0 12px;
    z-index: 10;
  }

  .close .van-icon {
    position: absolute;
    top: -2px;
    right: -2px;
    color: #fff;
    font-size: 16px;
    transform: scale(.5);
  }

  video {
    z-index: 1;
  }

  .upload-area {
    position: relative;
    width: 6.5625rem;
    height: 6.5625rem;
    border-radius: 0.3125rem;
    border: 1px solid #CFCFCF;

    &::after {
      position: absolute;
      content: "";
      width: 1.5rem;
      height: 0.1875rem;
      background: #AAAAB3;
      border-radius: 0.3125rem;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    &::before {
      position: absolute;
      content: "";
      width: 0.1875rem;
      height: 1.5rem;
      background: #AAAAB3;
      border-radius: 0.3125rem;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .box {
    margin-top: 1.2188rem;
    border: 1px solid #CFCFCF;
    overflow: hidden;
    border-radius: 0.3125rem;
  }

  .photo-img {
    margin-top: 1.2188rem;
    display: flex;
    flex-wrap: wrap;

    img {
      margin: 0 8px 8px 0;
    }
  }

  .video-list {
    margin-top: 1.2188rem;
    display: flex;
    flex-wrap: nowrap;
  }

}</style>